<template>
    <div class="sign">
        <header-nav></header-nav>
        <div class="container">
            <div class="login">
                <header>注册</header>
                <el-form :model="signInfo" status-icon :rules="rules" ref="loginInfo" label-width="70px" class="demo-ruleForm">
                    <el-form-item label="登录名" prop="loginName">
                        <el-input type="text" v-model="signInfo.loginName" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email" >
                        <el-input type="text" v-model="signInfo.email" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="signInfo.pass" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="re_pass">
                        <el-input type="password" v-model="signInfo.re_pass" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit()">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import HeaderNav from "@/components/header/header"
import { signup } from "@/service/api"

export default {
    data() {
        let validateLoginName = (rule, value, callback) => {
            if (value.length < 3) {
                callback(new Error('用户名长度至少为3'));
            } else {
                callback();
            }
        };
        let validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
        };
        let validateCheckPass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.signInfo.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };

        return {
            signInfo: {
                loginName: '',
                email: '',
                pass: '',
                re_pass: ''
            },
             rules: {
                loginName: [
                    { validator: validateLoginName, trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur'] }
                ],
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                re_pass: [
                    { validator: validateCheckPass, trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        async submit() {
            const params = this.signInfo
            const res = await signup(params)

            if(res.code) {
                // console.log(res.data);
                this.$message({
                    message: res.msg,
                    type: 'success'
                })
                this.$router.push("/login")
            } else {
                this.$message.error(res.msg)
            }
        }
    },
    components: {
        HeaderNav
    }
}
</script>

<style lang="scss" scoped>
    @import '../../style/mixin.scss';

    .sign {
        .login {
            // @include center;
            margin: 100px auto;
            background-color: $fff;
            width: 500px;
            border-radius: 5px;
            overflow: hidden;
            header {
                @include lh(50px);
                background-color: $title-bg;
                padding: 0 20px;
                color: $main;
            }
            .demo-ruleForm {
                padding: 20px;
            }
        }
    }
</style>


